<template>
  <div class="businessMask">
    <div class="businessDialog">
      <div class="dialog-header" v-winmove>
        <span>{{ propsParam.dialogTitle }}</span>
        <span class="icon iconfont iconbiaoqianlan-guanbi" @click="cancel"></span>
      </div>
      <div class="dialog-body">
        <el-tree
            :indent="0"
            lazy
            ref="myTree"
            node-key="ID"
            :props="treeProps"
            :load="loadNode"
            check-strictly
            icon-class="icon iconfont iconkuangjia-xiala1"
            :expand-on-click-node="false"
            :show-checkbox="Boolean(propsParam.multipleChoice)"
            @check="handleCheckChange">
        </el-tree>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="confirm">确定</span>
        <span class="systemButtonCancel" @click="cancel">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
import {customTree} from "@/business/api/customTree";
import winmove from "@/directives/winmove";

export default {
  data() {
    return {
      treeProps: {},
      treeParams: null,
      checkedList: []
    }
  },
  props: {
    propsParam: {
      dialogTitle: null, // 标题
      multipleChoice: true, // 2-多选 1-单选
      params: null, // 参数
    },
    microId: {
      default: null
    }
  },
  directives: {
    winmove,
  },
  created() {
    this.treeParams = this.propsParam.params
    this.treeParams.microId = this.microId
    this.treeProps = {
      label: this.treeParams.nameName, // 自定义
      isLeaf: "ISLEAF",
      id: "ID",
      disabled: (data) => {
        if (this.treeParams.typeValue) {
          if (this.treeParams.typeValue.length > 1) {
            return !this.treeParams.typeValue.split(',').indexOf(data.TYPE) > -1
          } else {
            return data.TYPE != this.treeParams.typeValue
          }
        }
      }
    }
  },
  methods: {
    /*懒加载*/
    async loadNode(node, resolve) {
      if (node.level > 0) {
        this.treeParams.parentId = node.data.ID;
        this.treeParams.TYPE = node.data.TYPE;
      }
      customTree(this.treeParams).then((res) => {
        if (res.code == 200) {
          if (res.success) {
            res.info.forEach(node => {
              node.ISLEAF = !Boolean(node.ISLEAF)
            })
            return resolve(res.info);
          } else this.message(res.msg, 3);
        } else this.message(res.msg, 3);
      });
    },
    /*勾选*/
    handleCheckChange(data, node) {
      this.checkedList = node.checkedNodes
      if (this.propsParam.multipleChoice === 1 && node.checkedNodes.length > 1) {
        this.checkedList = []
        this.$nextTick(() => {
          this.$refs.myTree.setCheckedKeys([])
          this.$refs.myTree.setChecked(data, true)
        })
        this.checkedList.push(data)
      }
    },
    confirm() {
      this.$emit('getCheckedRoles', this.checkedList)
    },
    cancel() {
      this.$emit('treeCancel')
    }
  }
}

</script>

<style lang="scss">
.businessDialog {
  width: 424px;
  height: 565px;

  .el-tree {
    color: var(--organization-tree-text-color);
    padding-left: 20px;
    background-color: transparent;

    .el-tree-node {
      .el-tree-node__content {
        background-color: transparent;

        .iconkuangjia-xiala1 {
          color: var(--organization-tree-dropdown-color);
          font-size: 12px;
          padding-left: 0;
          padding-right: 0;

          & ~ span span {
            &:first-child {
              margin-right: 5px;
              width: 16px;
              height: 16px;
              display: inline-block;

              &.disabled {
                color: rgb(249, 73, 99);
              }
            }

            &:last-child {
              padding: 2px 8px;
            }
          }
        }

        .is-leaf.iconkuangjia-xiala1 {
          visibility: hidden;
        }
      }

      .el-tree-node__children {
        padding-left: 48px;
        overflow: visible;

        .el-tree-node {
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 40px;
            height: 13px;
            border-bottom: 1px solid var(--organization-tree-line-color);
            border-bottom-left-radius: 5px;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-100%);
          }

          &::after {
            content: '';
            display: block;
            width: 40px;
            height: 100%;
            border-left: 1px solid var(--organization-tree-line-color);
            position: absolute;
            bottom: -10px;
            left: 0;
            transform: translateX(-100%);
          }

          &:first-child::after {
            top: 0;
            height: calc(100% + 10px);
          }

          &:last-child::after {
            top: 0;
            height: 11px;
          }
        }
      }

      &.is-current {
        .el-tree-node__content {
          background-color: transparent;

          span:last-child span:last-child {
            background-color: rgba(83, 168, 255, 1);
            color: rgba(255, 255, 255, 1);
          }
        }

        .el-tree-node__children
        .el-tree-node
        .el-tree-node__content
        span:last-child
        span:last-child {
          background-color: transparent;
          color: var(--organization-tree-text-color);
        }
      }

      &.is-expanded .el-tree-node__content {
        background-color: transparent;
      }

      /* checkbox 样式 */
      .el-checkbox__inner {
        width: 14px;
        height: 14px;
        background: rgba(238, 238, 238, 1);
        border: 1px solid var(--system-checkbox-border-color);
        border-radius: 4px;

        &:hover {
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(29, 191, 206, 1);
        }
      }

      &.is-checked label.is-checked {
        .el-checkbox__label {
          color: var(--system-checkbox-text-color);
        }

        .el-checkbox__inner {
          width: 14px;
          height: 14px;
          background: var(--system-checkbox-bgc);
          border: 1px solid rgba(29, 191, 206, 1);
          border-radius: 4px;
          padding: 0;

          &::after {
            width: 10px;
            height: 10px;
            left: 0;
            top: 1px;
            background-color: rgba(29, 191, 206, 1);
            border-radius: 4px;
            transform: rotate(90deg);
          }
        }
      }

      .is-focus .el-checkbox__inner {
        border: 1px solid rgba(29, 191, 206, 1);
      }
    }
  }
}
</style>
